<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style>
        div,
        input {
            margin: 0;
            padding: 0;
        }

        div {
            width: 400px;
            height: 200px;
            background-color: rgb(254, 244, 235);
            border: 1px solid pink;
            margin: 10px auto;
            padding: 10px;
        }

        input {
            color: white;
            background-color: pink;
            font: 12px/1.5 Arial;
            font-weight: 700;
            border: none;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            var oInput = document.getElementsByTagName("input");
            oInput[0].onclick = function () {
                var x = window.getComputedStyle(oBox, null);
                alert(
                    "width: " + x.width + "\n"
                    + "height: " + x.height + "\n"
                    + "background-color: " + x.backgroundColor
                )
            }

            oInput[1].onclick = function () {
                oBox.style.cssText = "width:330px;height:100px;background-color:rgb(239,248,255);border:1px solid #00ffff";
                for (var i = 0; i < oInput.length; i++) { oInput[i].style.cssText = "background-color:#00ffff"; }
            }
            oInput[2].onclick = function () {
                for (var i = 0; i < oInput.length; i++) {
                    oBox.style.cssText = "";
                    oInput[i].style.cssText = "";
                }
            }
        }
    </script>
</head>

<body>
    <div id="box">
        <input type="button" value="Get Style">
        <input type="button" value="Set Style">
        <input type="button" value="Default Style">
    </div>
</body>

</html>